<template>
    <el-row class="custom-upload-input">
        <el-input
                v-model.trim="file"
                tabindex="-1"
                placeholder="请选择文件"
                disabled
        />
        <span class="fileinput" :style="'width:'+btnStyle.width ">
                    <el-button
                            :size="btnStyle.size"
                            type="primary"

                    >浏览</el-button>
                    <input
                            :id="formName"
                            type="file"
                            tabindex="-1"
                            :name="formName"
                            value
                            class="fileinput-button"
                            :accept="accept"
                            @change="changeFile"
                            @click="handleFileClick"
                    >
                  </span>
        <!--<el-col :style="'width: calc(100% - '+btnStyle.width+')'">
            <el-input
                    v-model.trim="file"
                    tabindex="-1"
                    placeholder="请选择文件"
                    disabled
            />
        </el-col>
        <el-col :style="'width:'+btnStyle.width ">
                  <span class="fileinput">
                    <el-button
                            :size="btnStyle.size"
                            type="primary"
                    >浏览</el-button>
                    <input
                            :id="formName"
                            type="file"
                            tabindex="-1"
                            :name="formName"
                            value
                            class="fileinput-button"
                            :accept="accept"
                            @change="changeFile"
                    >
                  </span>
        </el-col>-->
    </el-row>
</template>

<script>
export default {
  name: 'upload-input',
  data() {
    return {
      file: this.value,
      formName: this.name,
      btnStyle: this.buttonStyle
    }
  },
  props: {
    name: String,
    size: {
      type: Number,
      default: 1 * 1024 * 1024
    },
    buttonStyle: {
      type: Object,
      default: () => {
        return {
          width: '90px',
          size: '', // medium / small / mini
        }
      }
    },
    accept: {
      type: String,
      default: '.*'
    },
    styleObj: String,
    value: String
  },
  watch: {
    value: {
      handler(val, o) {
        if (val) {
          this.file = val;
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleFileClick() {
      this.$emit('fileChange')
    },
    // 选择文件的验证和操作
    changeFile(flieVal) {

      const id = flieVal.currentTarget.id;
      if (flieVal.currentTarget.value) {
        if (this.accept) {
          let l = flieVal.currentTarget.value.lastIndexOf('.')
          let fileNameLength = flieVal.currentTarget.value.length;// 取到文件名长度
          let suffix = flieVal.currentTarget.value.substring(l + 1, fileNameLength);// 截
          if (this.accept.indexOf(suffix) === -1) {
            this.$notify.warning({
              title: '警告',
              message: '上传文件只能' + this.accept + '是格式文件',
              position: 'top-right',
              duration: 1000
            });
            return false
          }
        }
        if (flieVal.currentTarget.files[0].size.toFixed(2) >= this.size) {
          this.$message({
            message: '请上传小于' + this._formatFlowUnit(this.size) + '的文件',
            type: 'error',
            center: true
          });
          flieVal.currentTarget.value = ''
          return false
        }
        this.file = flieVal.currentTarget.files[0].name
      }
    },
    _formatFlowUnit(bytes) { // 流量转换
      if (!bytes) {
        return '0.0B'
      }
      if (!isNaN(parseInt(bytes))) {
        var k = 1024;
        var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        // var sizes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        var i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(k));
        var ret = (bytes / Math.pow(k, i)).toFixed(2) + sizes[i];
        if (i === 0) {
          ret = bytes + sizes[i]
        }
        return ret
      } else {
        return '-'
      }
    },
    handleNodeClick(data) {
      this.label = data.menuName;
      this.val = data.id;
      this.$refs['select-tree'].blur();
    }
  },
  computed: {
    // selectDisabled() {
    //   return this.disabled || false;
    // },
    // selectStyle() {
    //   return this.styleObj || '';
    // }
  }
}
</script>

<style scoped>
    .custom-upload-input{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }
    .fileinput {
        position: relative;
        float: left;
        text-align: center;
        cursor: pointer;
    }

    .fileinput-button {
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        opacity: 0;
        height: 100%;
        width: 100%;
        /* -ms-filter: "alpha(opacity=0)"; */
        font-size: 200px;
    }
</style>
